<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Insert title here</title>
		<script type="text/javascript" src="../js/jquery.js"></script>
		<script type="text/javascript">
//隔行变色+鼠标背景色
$(function(){
	//隔行变色
	$("#u1 li:even").css("background","#FF6666");
	$("#u1 li:odd").css("background","#6666FF");
	//鼠标背景色
	var c;
   $("#u1 li").hover(
   function(){
   		c = $(this).css("background");
   		$(this).css("background","white");
   },
   function(){
   	    $(this).css("background",c);
   });
});
//一个按钮处理多个不同事件
$(function(){
   $("#btn2").toggle(
   function(){
   	   alert("你点了我一次了!");
   },
    function(){
   	   alert("你点了我两次了!");
   },
    function(){
   	   alert("你点了我三次了!够了！");
   }
   );
});
//live函数的使用
$(function(){
	$("span").live("click",function(){
		alert($(this).text());
	});
    //添加一个span元素按钮的处理
	$("#btn3").bind("click",function(){
		var s = "<span>第二个超链接</span>";
		$("body").append($(s));
	});
});
</script>
	</head>
	<body>
		<h1>
			事件函数示例
		</h1>
		<ul id="u1">
			<li>
				国家大剧院举行新年音乐会，一起去！
			</li>
			<li>
				今年过年不回家了！
			</li>
			<li>
				国家大剧院举行新年音乐会，一起去！
			</li>
			<li>
				今年过年不回家了！
			</li>
			<li>
				国家大剧院举行新年音乐会，一起去！
			</li>
			<li>
				今年过年不回家了！
			</li>
		</ul>
		<hr />
		<input type="button" value="一个按钮处理多个事件" id="btn2" />
		<hr />
		<input type="button" value="添加一个span元素" id="btn3" />
		<br />
		<span>第一个超链接</span>

	</body>
</html>
